<template>
    <div class="bottombar-box">
        <div class="item">
            <div class="iconfont">&#xe69f;</div>
            <div class="text">店铺</div>
        </div>
        <div class="item">
            <div class="iconfont">&#xe639;</div>
            <div class="text">客服</div>
        </div>
        <div class="item">
            <div class="iconfont">&#xe689;</div>
            <div class="text">收藏</div>
        </div>
        <div class="shopping" @click="shoppingPush()">加入购物车</div>
        <div class="buy">立即购买</div>
    </div>
</template>

<script>

import {mapState,mapMutations,mapActions} from 'vuex';

export default {
    computed:{
        ...mapState(["details","shopping"]),
    },
    methods:{
        shoppingPush(){
            this.shopping.itemId.push(this.details.itemId);
            let shoppingData=JSON.parse(sessionStorage.getItem("shopping"));
            let buyShoppingData=JSON.parse(sessionStorage.getItem("buyShopping"))||[];
            buyShoppingData=buyShoppingData.length==0?[]:buyShoppingData["buyShoppingData"];
            console.log(buyShoppingData);
            buyShoppingData[this.details.itemId]=shoppingData;
            sessionStorage.setItem("buyShopping",JSON.stringify({buyShoppingData}))
            // console.log(this.shopping.itemId);
        }
    },
}
</script>

<style lang="less" scoped>
    .active>div{
        color: @light-pink;
    }
    .bottombar-box{
        height: @h;
        width: 100%;
        background: @white;
        position: absolute;
        bottom: 0px;
        border-top:1PX solid @99;
        display: flex;
        z-index: 100;
        text-align: center;
        .item{
            flex-grow: 1;
            font-size: 25px;
            .iconfont{
                margin-top:10px;
                font-size: 40px;
            }
        }
        .shopping{
            flex-grow: 2.5;
            font-size: 30px;
            line-height: @h;
            background-color: @pink1;
            color: @pink;
        }
        .buy{
            flex-grow: 2;
            font-size: 30px;
            line-height: @h;    
            background-color: @pink;
            color: @white;

        }
    }
</style>
